<template>
	<el-select v-model="searchForm.field" class="el-form-item" clearable :disabled="disabled" filterable :loading="loading" :placeholder="placeholder" remote :remote-method="remoteMethod" @change="handleSelectChange" @clear="handleClear">
		<template v-if="dataType">
			<el-option v-for="item in dataList" :key="item.value" :label="labelKey == 'label' ? item.label : labelKey == 'name' ? item.name : item.value" :value="valueKey == 'value' ? item.value : valueKey == 'id' ? item.id : item.label" />
		</template>
		<el-option v-for="(item, index) in dataList" v-else :key="item + index" :label="item" :value="item" />
		<el-pagination :current-page="searchForm.pageNum" layout="prev, pager, next" :page-size="searchForm.pageSize" small :total="dataCount" @current-change="handleCurrentChange" />
	</el-select>
</template>
<script>
import global from '@/utils/global'
export default defineComponent({
	name: 'SelectSimple',
	props: {
		modelValue: {
			type: String,
			default: '',
		},
		url: {
			// 请求Url
			type: String,
			default: '',
		},
		placeholder: {
			// placeholder 内容
			type: String,
			default: '请输入',
		},
		valueKey: {
			type: String,
			default: 'value',
		},
		labelKey: {
			type: String,
			default: 'label',
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		dataType: {
			//默认数据是一个数据格式 true=>[{ lable:'1',value: 1}]  false:为一个数组 [1,2,3,4]
			type: Boolean,
			default: true,
		},
		paramsQuery: {
			type: Object,
			default: function () {
				return {}
			},
		},
		initStatus: {
			// 是否初始化请求并显示第一个值
			type: Boolean,
			default: false,
		},
		initReqStatus: {
			//是否初始化请求
			type: Boolean,
			default: false,
		},
		defaultValue: {
			// 是否显示默认值
			type: String,
			default: '',
		},
	},
	emits: ['getDefaultValue', 'update:modelValue', 'handleClear'],
	setup(props, context) {
		const state = reactive({
			dataList: [],
			searchForm: {
				pageNum: 1,
				pageSize: 10,
				field: '',
			},
			dataCount: 0,
			loading: false,
		})
		onMounted(() => {
			if (props.initStatus || props.initReqStatus) {
				state.searchForm.field = ''
				handleSearch()
			}
		})
		watch(
			() => props.modelValue,
			value => (state.searchForm.field = value)
		)
		watch(
			() => props.defaultValue,
			value => ((state.searchForm.field = value), handleSearch())
		)
		const remoteMethod = query => {
			if (query) {
				state.searchForm.field = query
				getTableList()
			} else {
				getTableList()
			}
		}
		const handleClear = () => {
			state.searchForm.field = ''
		}
		const getTableList = () => {
			state.loading = true
			global
				.$fetchPostData(props.url, {
					...state.searchForm,
					...props.paramsQuery,
				})
				.then(data => {
					if (data.code == 200) {
						state.loading = false
						if (data.data.rows.length > 0) {
							state.dataCount = Number(data.data.total)
							state.dataList = data.data.rows
							if (state.searchForm.pageNum == 1 && props.initStatus) {
								state.searchForm.field = data.data.rows[0].label
								context.emit('getDefaultValue', data.data.rows[0])
							}
						} else {
							state.dataCount = 0
							state.dataList = []
						}
					} else {
						global.$baseMessage(data.msg, 'error')
					}
				})
		}
		const handleSelectChange = e => {
			context.emit('update:modelValue', e)
			if (props.dataType) {
				const resAry = state.dataList.filter(item => item[props.valueKey] == e)
				if (resAry.length > 0) {
					context.emit('getDefaultValue', resAry[0])
				}
			}
		}
		const handleCurrentChange = val => {
			state.searchForm.pageNum = val
			getTableList()
		}
		const handleSearch = () => {
			state.searchForm.pageNum = 1
			getTableList()
		}
		const resetSelect = () => {
			state.searchForm.field = ''
		}
		return {
			...toRefs(state),
			remoteMethod,
			handleSelectChange,
			handleCurrentChange,
			handleSearch,
			handleClear,
			resetSelect,
		}
	},
})
</script>
<style lang="scss" scoped></style>
